<template>
  <t-space>
    <t-badge v-if="versionInfo.newVersion" count="." dot>
       <t-link theme="default" hover="color" @click="visibleDrawer=true">
         <icon name="notification-add" size="18px" />
       </t-link>
     </t-badge>
     <t-badge v-else >
       <t-link theme="default" hover="color" @click="visibleDrawer=true">
         <icon name="notification-add" size="18px" />
       </t-link>
     </t-badge>
    <t-link theme="default" hover="color" @click="openAbout">
                   <icon name="help-circle" size="18px" />
                 </t-link>
  </t-space>

<t-dialog :visible="visibleAbout" header="关于RsCms" @close="visibleAbout=false" :footer="null">
      <t-card>
        <t-list>
          <t-list-item>Version:{{versionInfo.version}}</t-list-item>
          <t-list-item>Environment:Production</t-list-item>
          <t-list-item>Database:{{versionInfo.database}}</t-list-item>
           <t-list-item><t-link href="https://rscode.cn/rscms/readme.html">User documentation</t-link></t-list-item>
        </t-list>
      </t-card>
      <template #footer>
          Copyright © 2023 – 2024 Rswl Foundation,RsCms is a registered trademark of Rswl Foundation Ltd.
      </template>
    </t-dialog>


  <t-drawer :visible="visibleDrawer" size="large" :footer="null" header="产品更新动态" @close="visibleDrawer=false" :z-index="3000">
    <t-timeline>
      <t-timeline-item v-if="versionInfo.newVersion" :label="versionInfo.updateDate">
        <t-space direction="vertical">
        <div>{{versionInfo.description}}</div>
        <t-link theme="primary" href="https://rscode.cn/rscms/readme.html">前往下载地址</t-link>
      </t-space>  </t-timeline-item>
      <t-timeline-item label="2024-10-01">RsCms上线，结合AI自动生成文章</t-timeline-item>
    </t-timeline>
  </t-drawer>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';

  import { Icon } from 'tdesign-icons-vue-next';
  import pgk from '../../../package.json';
  import {
    checkVersion
  } from '@/api/version';
  const version = ref('')
  const visibleDrawer = ref(false)
const versionInfo=ref({})

const visibleAbout=ref(false)
  const openAbout=()=>{
    visibleAbout.value=true;
  }
  const fetchData = () => {
    console.log('pkg.version',JSON.stringify(pgk.version))
    checkVersion(pgk.version).then(ret => {
      console.log('ret',JSON.stringify(ret))
      versionInfo.value = ret.result
      localStorage.setItem('checkVersion', JSON.stringify(ret))
      version.value = ret.version
    })
  }
  onMounted(() => {
    fetchData()
  })
</script>

<style>
</style>
